<template>
  <view class="page-address">
    <view class="form">
      <uni-forms ref="form" :modelValue="data.form" :border="true" :rules="data.rules" :label-width="formLabelWidth">
        <uni-forms-item :label="$t('account.rmas.form.text_type')" name="type">
          <picker @change="bindPickerChange" class="picker-wrap" :value="typeValue" range-key="label" :range="types">
            <view class="picker-item">
              <view class="uni-input">{{ settings.rma_types[data.form.type] }}</view>
              <uni-icons type="bottom" class="icon" size="18" color="#999"></uni-icons>
            </view>
          </picker>
        </uni-forms-item>
        <uni-forms-item :label="$t('account.rmas.form.text_quantity')" name="quantity">
          <uni-easyinput
            :inputBorder="false"
            :clearable="false"
						placeholderStyle="font-size:14px"
            type="number"
            v-model="data.form.quantity"
            :placeholder="$t('account.rmas.form.text_quantity')"
          />
        </uni-forms-item>
        <uni-forms-item :label="$t('account.rmas.form.text_opened')" name="opened">
          <switch :checked="data.form.opened" @change="openedChange" style="transform: scale(0.8);margin-top: 4px;" color="#222" />
        </uni-forms-item>
        <uni-forms-item :label="$t('account.rmas.form.reason_value')" name="type">
          <picker @change="bindReasonsChange" class="picker-wrap" :value="reasonValue" range-key="name" :range="settings.rma_reasons" v-if="settings.rma_reasons.length">
            <view class="picker-item">
              <view class="uni-input">{{ settings.rma_reasons[reasonValue].name }}</view>
              <uni-icons type="bottom" class="icon" size="18" color="#999"></uni-icons>
            </view>
          </picker>
        </uni-forms-item>
        <uni-forms-item :label="$t('account.rmas.form.text_comment')" name="comment">
          <uni-easyinput
            :inputBorder="false"
            :clearable="false"
						placeholderStyle="font-size:14px"
            type="textarea"
            v-model="data.form.comment"
            :placeholder="$t('account.rmas.form.text_comment')"
          />
        </uni-forms-item>
      </uni-forms>
    </view>

    <view class="submit-wrap"><view @click="submit" class="btn-primary">{{ $t('common.btn_submit') }}</view></view>
  </view>
</template>

<script setup>
import { t } from '@/locale/index'
const { proxy } = getCurrentInstance()
const settings = uni.getStorageSync('settings');
const types = Object.keys(settings.rma_types).map(key => {
  return {
    value: key,
    label: settings.rma_types[key],
  }
})

let typeValue = 0
let reasonValue = 0

let id = 0

const data = reactive({
  form: {
    type: types[0].value,
    quantity: 1,
    opened: false,
    rma_reason_id: settings.rma_reasons.length ? settings.rma_reasons[0].id : 0,
    order_product_id: 0,
    comment: '',
  },

  // types: Object.keys(settings.rma_types).map(key => settings.rma_types[key]),
  rules: {},
})

onLoad(e => {
  data.form.order_product_id = e.order_product_id * 1

  if (e.id) {
    loadData()
  }
})

const formLabelWidth = computed(() => {
	return uni.getSystemInfoSync().language === 'zh_cn' ? 70 : 100
})

const loadData = () => {
  proxy.$http.get(`rmas/${id}`).then(res => {
    data.form = res.data
    proxy.$refs['address-choose'].setAddress(res.data)
  })
}

const bindPickerChange = e => {
  data.form.type = types[e.detail.value].value
}

const openedChange = e => {
  data.form.opened = e.detail.value
}

const bindReasonsChange = e => {
  data.form.rma_reason_id = settings.rma_reasons[e.detail.value].id
  reasonValue = e.detail.value
}

const submit = () => {
  const url = id ? `rmas/${id}` : 'rmas'
  const type = id ? 'put' : 'post'

  proxy.$http[type](url, data.form).then(res => {
    proxy.$util.msg({ title: t('common.submit_success'), icon: 'success' }, () => {
      uni.navigateBack()
    })
  })
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
